<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
    name: "SelectGoodsSpecs",
    computed: {},
    data() {
        return {
            // 框显隐
            boxVisible: false,
            // 输入值
            specsBaseValue: "",
            // 数据 不存在
            list: [],
            // 数据 已存在
            listBe: [],
            // 过滤数据
            listFilter: [],

            //已选
            specsValue: [],

            // 创建框
            boxCreateVisible: false,
            addForm: {
                name: "",
                attrSub: "",
                values: [],
            },
            // 模式  默认 || 扩展 extend
            model: "default",
            textTitle: "-***-",
        };
    },
    methods: {
        updateData(r) {
            this.list = r.list;
            this.listBe = r.listBe;
            console.error(22, r);
        },

        // 隐藏选择
        hide() {
            setTimeout(() => {
                this.specsBaseValue = "";
                this.list = [];
                this.listBe = [];
            }, 500);

            this.boxVisible = false;
        },
        // 成功回调
        onSuccess() {},
        // 取消回调
        onCancel() {},
        // 失败回调
        onError() {},

        // 取消
        editBoxCancel() {
            this.onCancel();
            this.hide();
        },

        // 选择
        selectSpecBase(item_) {
            this.onSuccess(item_);
            this.hide();
        },

        // 输入内容监测
        specsBaseInput(e) {
            this.listFilter = this.list.filter((item) => {
                let _is = item.label.indexOf(e);
                return _is >= 0;
            });
        },

        // 添加回调
        onCreate() {},
        onDelete() {},
        // 添加
        async addSpecBase() {
            if (this.model == "default") {
                this.onCreate(
                    {
                        value: this.specsBaseValue,
                    },
                    this
                );
                this.hide();
            } else if (this.model == "extend") {
                this.showCreateBox();
            }
        },

        // 删除
        delSpecBase(item_, index_) {
            this.$confirm(
                "确定删除  <strong>" +
                    item_.label +
                    "</strong>  " +
                    this.textTitle +
                    "么?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                }
            )
                .then(() => {
                    this.onDelete(
                        {
                            item: item_,
                        },
                        this
                    );
                    // this.editBoxCancel();
                    // this.delSpecBaseSubmit(item_, index_);
                })
                .catch(() => {});
        },

        // 新增
        showCreateBox() {
            this.addForm.name = this.specsBaseValue;
            this.boxCreateVisible = true;
        },
        hideCreateBox() {
            this.addForm = {
                name: "",
                attrSub: "",
                values: [],
            };
            this.boxCreateVisible = false;
        },

        async submitCreateBox() {
            if (this.addForm.values.length > 0) {
                this.onCreate(
                    {
                        name: this.addForm.name,
                        values: this.addForm.values,
                    },
                    this
                );
                this.specsBaseValue = "";
                this.hideCreateBox();
            }
        },

        // 新增属性值
        addAttrSub() {
            let _attrSub = this.addForm.attrSub;
            console.log(222222,_attrSub);
            if (!this.$vFN.Utils.isEmpty(_attrSub)) {
                let _is = 0;
                this.addForm.values.forEach((item) => {
                    if (item.value == _attrSub) {
                        _is += 1;
                    }
                });
                console.log(_is);
                if (_is <= 0) {
                    this.addForm.values.push({
                        value: _attrSub,
                    });
                    this.addForm.attrSub = "";
                } else {
                    this.$vFN.Tools.messageError("属性值已存在");
                }
            } else {
                this.$vFN.Tools.messageError("请输入属性值");
            }
        },

        // 移除属性值
        delAttrSub(item_, index_) {
            this.$delete(this.addForm.values, index_);
        },
    },
    watch: {},
    mounted() {
        this.boxVisible = true;
    },
    beforeCreate() {},
};
</script>